<template>
  <div class="overflow-x-auto">
    <!-- 将加载状态移到表格外部 -->
    <!-- <div
      v-if="studentList.length === 0"
      class="flex justify-center items-center py-10"
    >
      <span class="loading spinning-spinner text-primary mt-40 w-1/15"></span>
    </div> -->
    <Loading v-show="isLoading"></Loading>
    <table class="table table-lg" v-show="!isLoading">
      <!-- head -->
      <thead>
        <tr>
          <th>
            <label>
              <input type="checkbox" class="checkbox" />
            </label>
          </th>
          <th>Name</th>
          <th>Class</th>
          <th></th>
        </tr>
      </thead>

      <!-- 表格内容 -->
      <tbody>
        <StudentListItem
          v-for="studentItem in filterStudentList"
          :student-item="studentItem"
          :key="studentItem.id"
        />
      </tbody>
    </table>
  </div>
  <Pagination :current-page="currentPage" :page-count="pageCount" />
</template>

<script setup>
import { ref, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import StudentListItem from "./StudentListItem.vue";
import { countStudent, getStudentListWithLimit } from "@/services/ApiStudent";
import { getUserId } from "@/ultils/tokenHelper";
import Loading from "@/ui/Loading.vue";
import { useSearchStore } from "@/stores/search";
import { storeToRefs } from "pinia";
import Pagination from "@/ui/Pagination.vue";
import { getConfig } from "@/ultils/configHelper";

const router = useRouter();
const route = useRoute();

const currentPage = ref(route.query.page || 1);
const pageSize = getConfig("PAGE_SIZE");
const pageCount = computed(() => {
  return Math.ceil(studentCount.value / pageSize);
});

const searchStore = useSearchStore();
const { studentSearchCondition } = storeToRefs(searchStore);
const isLoading = ref(true);

const studentList = ref([]);
const studentCount = ref(0);

// const filterStudentListByPage = computed(() => {
//   const start = (currentPage.value - 1) * pageSize;
//   const end = currentPage.value * pageSize;
//   return filterStudentList.value.slice(start, end);
// });

const filterStudentList = computed(() => {
  return studentList.value.filter((student) => {
    const studentInfoJSON = JSON.stringify([
      student.name.toLowerCase(),
      student.class,
      student.gender,
      student.grade,
    ]);

    for (const condition of studentSearchCondition.value) {
      if (!studentInfoJSON.includes(condition)) {
        return false;
      }
    }
    return true;
  });
});

watch(
  () => currentPage.value,
  () => {
    fetchData();
    router.push({ query: { page: currentPage.value } });
  }
);
watch(
  () => route.query.page,
  (page) => {
    currentPage.value = page;
  }
);

async function fetchData() {
  isLoading.value = true;
  const teacherId = getUserId();
  studentList.value = await getStudentListWithLimit(
    teacherId,
    currentPage.value,
    pageSize
  );
  console.log(studentList.value);
  isLoading.value = false;
}

onMounted(async () => {
  router.push({ query: { page: currentPage.value || 1 } });
  fetchData();
  const teacherId = getUserId();
  const countStudentData = await countStudent(teacherId);
  studentCount.value = countStudentData;
  console.log(studentCount.value);
});
</script>
